import { Form, Button } from 'antd';
import { useState } from 'react'
import './Watermeter_management.scss'
import Biao from './Biao/Biao';
import Biao2 from './Biao/Biao2';
import Biao3 from './Biao/Biao3';
import Edit from './Edit/Edit';
import Edit2 from './Edit/Edit2'
import http from '../../utils/http';
import { useEffect } from 'react';
import store from '../../store';



const Watermeter_management = () => {
  /*
  *状态和变量
  */
  // 设置渲染组件的状态来判断应该渲染哪个组件
  const [state, setState] = useState(0)

  //设置from
  const [form] = Form.useForm();

  // 设置一个可以接收页面数据的变量
  const [mydata, setMydata] = useState([{}]);

  //设置一个装组件的容器
  const [biao, setBiao] = useState(); 



  /*
  *方法
  */

  // 点击事件：表格导航的点击
  const dianji = (v) => {
    let br2 = document.querySelector(".br2");
    br2.style.transform = `translateX(${(v - 1) * 76}px)`;
    if (v == 1) {
      http({
        url: '/device/deviceInformation',
        method: 'post',
      }).then((res) => {
        setMydata(manage(res.data.deviceInformationVoList))
        store.liujinchang.amount = res.data.sum;

      })

    } else if (v == 2) {
      http({
        url: '/device/deviceInformation',
        method: 'post',

      }).then((res) => {
        setMydata(manage(res.data.deviceInformationVoList))
        store.liujinchang.amount = res.data.sum;

      })
    } else if (v == 3) {
      http({
        url: '/maintenance/maintenanceRecord',
        method: 'post',

      }).then((res) => {
        setMydata(manage(res.data.maintenanceVoList));
        store.liujinchang.amount = res.data.sum;

      })
    }
    setState(v)
  }

  //后端时间戳转时间的方法
  const toTime = (value) => {
    let date = new Date(value)
    let y = date.getFullYear()  //获取年份
    let m = date.getMonth() + 1  //获取月份
    m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
    let d = date.getDate()  //获取日期
    d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
    return y + "-" + m + "-" + d

  }
  //处理数据的函数
  const manage = (e) => {
    let data1 = [];                               //空数组，用来装return出去的数据
    e.forEach((v, i) => {
      v.dinfUpdate = toTime(v.dinfUpdate);         //处理时间
      v['key'] = `${i + 1}`;                       //增加key
      data1.push(v)                                //讲处理好的数据放进数组中
    });
    return data1;
  }
  

  //批量删除
  const del = () => {

  }
  //新增
  const add = () => {

  }



  /*
  *钩子函数
  */
  // 页面加载时获取的表1数据
  useEffect(() => {
    let br2 = document.querySelector(".br2");
    br2.style.transform = `translateX(0px)`;
    console.log('加载哦');
    http({
      url: '/device/deviceInformation',
      method: 'post',

    }).then((res) => {
      console.log('回来了吗',res);

      setMydata(manage(res.data.deviceInformationVoList))
      setState(1)
      store.liujinchang.amount = res.data.sum;
    })
  }, [])

  useEffect(() => {
    if (state === 1) {
      setBiao(<Biao props={{toTime,mydata,setState,setMydata,manage}}></Biao>);
    } else if (state === 2) {
      setBiao(<Biao2 props={{toTime,mydata,setState,setMydata,manage}}></Biao2>);
    } else if (state === 3) {
      setBiao(<Biao3 props={{toTime,mydata,setState,setMydata,manage}}></Biao3>);
    } else if (state === 4) {
      setBiao(<Edit props={{mydata}}></Edit>);
    } else if (state === 5){
      setBiao(<Edit2 props={{mydata}}></Edit2>)
    }
  }, [mydata])

  return (
    <div className='WatermeterManagement'>
      <Form form={form} name="horizontal_login" layout="inline" className='title'>
        <Form.Item
          name="username">
          <div className='kuai'>
            <span></span>
            <span>车辆道闸管理</span>
          </div>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Button className='cha'
              type="primary"
              onClick={add}>新增</Button>
            <Button className='resize' onClick={del} type="primary">批量删除</Button>
          </div>

        </Form.Item>
      </Form>
      <div className='biao'>
        <div className='theme'>
          <div onClick={() => { dianji(1) }} style={{ color: state === 1 ? '#009688' : 'black' }}>
            设备列表
            <div className='br2'></div>
          </div>
          <div onClick={() => { dianji(2) }} style={{ color: state === 2 ? '#009688' : 'black' }}>告警记录</div>
          <div onClick={() => { dianji(3) }} style={{ color: state === 3 ? '#009688' : 'black' }}>运维记录</div>
        </div>
        {biao}
      </div>
    </div>
  );
};

export default Watermeter_management;
